﻿<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实时监控</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<!-- <meta http-equiv="refresh" content="5;url='https://gitee.com/iGaoWei'"> -->
		<link rel="stylesheet" href="css/comon0.css">
		<style>
			/* 隐藏特定元素的滚动条但允许内容滚动 */
			.wrap, .adduser {
				overflow-y: scroll; /* 允许垂直滚动 */
				-ms-overflow-style: none;  /* IE 和 Edge */
				scrollbar-width: none;     /* Firefox */
			}
			.wrap::-webkit-scrollbar {
				display: none;             /* Chrome、Safari 和 Opera */
			}

			/* 或者隐藏所有滚动条但允许内容滚动 */
			html, body {
				overflow-y: scroll; /* 允许垂直滚动 */
				-ms-overflow-style: none;  /* IE 和 Edge */
				scrollbar-width: none;     /* Firefox */
			}
			html::-webkit-scrollbar {
				display: none;             /* Chrome、Safari 和 Opera */
			}
		</style>
	</head>
	<script type="text/javascript">
		$(document).ready(function() {
			var html = $(".wrap ul").html()
			$(".wrap ul").append(html)
			var ls = $(".wrap li").length / 2 + 1
			i = 0
			ref = setInterval(function() {
				i++
				if (i == ls) {
					i = 1
					$(".wrap ul").css({
						marginTop: 0
					})
					$(".wrap ul").animate({
						marginTop: -'.52' * i + 'rem'
					}, 1000)
				}
				$(".wrap ul").animate({
					marginTop: -'.52' * i + 'rem'
				}, 1000)


			}, 2400);



			var html2 = $(".adduser ul").html()
			$(".adduser ul").append(html2)
			var ls2 = $(".adduser li").length / 2 + 1
			a = 0
			ref = setInterval(function() {
				a++
				if (a == ls2) {
					a = 1
					$(".adduser ul").css({
						marginTop: 0
					})
					$(".adduser ul").animate({
						marginTop: -'.5' * a + 'rem'
					}, 800)
				}
				$(".adduser ul").animate({
					marginTop: -'.5' * a + 'rem'
				}, 800)


			}, 4300);








		})
	</script>
	<script src="/push.js">

	</script>

	<body>
		<div class="loading">
			<div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
		</div>
		<div class="head">
			<h1><!-- <img src="picture/logo.png"> --><a href="#" style="color: white">鼎鲜团惠民补贴大盘</a></h1>
			<div class="weather"><img src="picture/weather.png"><span>南宁天气-{$weather.text}</span><span>{$weather.temperature}℃</span><span>{$weather.date}</span></div>
		</div>
		<div class="mainbox">
			<ul class="clearfix">
				<li>
					<div class="boxall" style="height: 2.7rem">
						<div class="alltitle">创业市场</div>

						<div class="sycm">
							<ul class="clearfix">
								<li>
									<h2 id="vip_count">{$vip_order.vip_count}</h2><span>高级会员</span>
								</li>
								<li>
									<h2 id="vip_count_number">{$vip_order.vip_count}</h2><span>互助订单</span>
								</li>
								<li>
									<h2 id="reward_price">{$vip_order.reward_price}</h2><span>互助金额</span>
								</li>
							</ul>
							<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
							<ul class="clearfix">
								<li>
									<h2 id="reward_order_count">{$vip_order.reward_order_count}</h2><span>排队中</span>
								</li>
								<li>
									<h2 id="reward_count">{$vip_order.reward_count}</h2><span>已互助</span>
								</li>
								<li>
									<h2 id="vip_progress">{$vip_order.progress}</h2><span>完成率</span>
								</li>
							</ul>


						</div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 2.7rem">
						<div class="alltitle">消费市场</div>

						<div class="sycm">
							<ul class="clearfix">
								<li>
									<h2 id="order_num">{$network_order.order_num}</h2><span>消费订单</span>
								</li>
								<li>
									<h2 id="free_order_num">{$network_order.free_order_num}</h2><span>互助订单</span>
								</li>
								<li>
									<h2 id="no_free_order_num">{$network_order.no_free_order_num}</h2><span>排队订单</span>
								</li>
							</ul>
							<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
							<ul class="clearfix">
								<li>
									<h2 id="order_total_price">{$network_order.order_total_price}</h2><span>销售总额</span>
								</li>
								<li>
									<h2 id="total_reward">{$network_order.total_reward}</h2><span>已互助金额</span>
								</li>
								<li>
									<h2 id="network_progress">{$network_order.progress}</h2><span>互助率</span>
								</li>
							</ul>
						</div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 2.7rem">
						<div class="alltitle">整体大盘</div>

						<div class="sycm">
							<ul class="clearfix">
								<li>
									<h2 id="all_order_count">{$all_order.all_order_count}</h2><span>惠民总数</span>
								</li>
								<li>
									<h2 id="all_order_total_price">{$all_order.order_total_price}</h2><span>营业总额</span>
								</li>
								<li>
									<h2 id ="order_queue_count">{$all_order.order_queue_count}</h2><span>排队总数</span>
								</li>
							</ul>
							<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
							<ul class="clearfix">
								<li>
									<h2 id="all_order_reward_count">{$all_order.order_reward_count}</h2><span>已惠民总数</span>
								</li>
								<li>
									<h2 id="all_order_reward_price">{$all_order.order_reward_price}</h2><span>总返金额</span>
								</li>
								<li>
									<h2 id="all_order_reward_rate">{$all_order.order_reward_rate}</h2><span>总免单率</span>
								</li>
							</ul>
						</div>
						<div class="boxfoot"></div>
					</div>

				</li>
				<li>
					<div class="bar">
						<div class="barbox">
							<ul class="clearfix">
								<li class="pulll_left counter" id="vip_order_total_price">{$vip_order.order_total_price}</li>
								<li class="pulll_left counter" id="network_order_total_price">{$network_order.order_total_price}</li>
							</ul>
						</div>
						<div class="barbox2">
							<ul class="clearfix">
								<li class="pulll_left">创业市场营业额</li>
								<li class="pulll_left">消费市场营业额</li>
							</ul>
						</div>
					</div>
					<div class="map">
						<div class="map1"><img src="picture/lbx.png"></div>
						<div class="map2"><img src="picture/jt.png"></div>
						<div class="map3"><img src="picture/map.png"></div>
						<div class="map4" id="map_1"></div>
					</div>
				</li>
				<li>
					<div class="boxall" style="height:5.2rem">
						<div class="alltitle">实时创业市场</div>

						<div class="addnew">

							<div class="adduser">

								<!-- div占位符 -->
								<ul class="clearfix">

								<div id="data-container">
									{volist name="$vip_order_data" id="vo"}
									<li class="clearfix">
								      <span class="pulll_left">
								        {$vo.customer_number} - {$vo.is_reward==1?'已免单':'待免单'}
								      </span>
										<span class="pulll_right">
								        ￥{$vo.price}
								      </span>
									</li>
									{/volist}
								</div>
								</ul>


							</div>
						</div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.4rem">
						<div class="alltitle">实时消费市场</div>

						<!-- div占位符 -->
						<div class="wrap" id="dataWrap">
						        <ul>
									{volist name="$network_order_data" id="vo"}
									<li>
										<p>{$vo.customerNumber} - {$vo.is_reward==1?'已免单':'待免单'}   ￥ {$vo.reward_total_price}</p>
									</li>
									{/volist}
						        </ul>
						    </div>




						<div class="boxfoot"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="back"></div>
		<script language="JavaScript" src="js/js.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/area_echarts.js"></script>
		<!--大屏-->
		<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
		<script type="text/javascript" src="js/jquery.countup.min.js"></script>
		<script type="text/javascript">
			$('.counter').countUp();
		</script>

		<script>
			// 建立连接
			var connection = new Push({
				url: 'wss://dxtg.order.ydk1.cn/app/88d0a5feed6fb2bd6efcf7a3276b5d3a', // websocket地址
				app_key: '88d0a5feed6fb2bd6efcf7a3276b5d3a',
				auth: '/plugin/webman/push/auth' // 订阅鉴权(仅限于私有频道)
			});
			// 假设用户uid为1
			var uid = 1;
			// 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息
			var user_channel = connection.subscribe('user-' + uid);

			// 当user-1频道有message事件的消息时
			user_channel.on('message', function(data) {
				console.log(data);
				// data里是消息内容
				let update_list = data.update_list;

				// 更新数据
				for (let field in update_list) {
					$('#' + update_list[field].field).html(update_list[field].value);
				}
			});


			// let network_order_data = function (dataArray) {
			// 	for (let data of dataArray) {
			// 		let htmlCode = htmlTemplate;
			// 		for (let key in data) {
			// 			let placeholder = "{" + key + "}";
			// 			htmlCode = htmlCode.replace(new RegExp(placeholder, "g"), data[key]);
			// 		}
			// 		finalHtml += htmlCode;
			// 		console.log(finalHtml);
			// 	}
			// 	// 获取容器元素并插入生成的 HTML 代码
			// 	let container = document.getElementById("data-container");
			// 	console.log(container);
			// 	if (container) {
			// 		container.innerHTML = finalHtml;
			// 	}
			// };

		</script>
	</body>
</html>